<template>
  <div class="system-dic-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="450px" draggable>
      <el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="所属类型">
              <!-- <el-cascader
                :options="state.dictTypeData"
                :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
                placeholder="请选择所属类型"
                clearable
                class="w100"
                v-model="state.ruleForm.dictTypeId"
              >
                <template #default="{ node, data }">
                  <span>{{ data.name }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader> -->
              <el-input v-model="state.dictType.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="字典名称">
              <el-input v-model="state.ruleForm.name" placeholder="请输入字典名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="字典值">
              <el-input v-model="state.ruleForm.value" placeholder="请输入字典值" clearable></el-input>
            </el-form-item>
          </el-col>
          <div style="height: 20px; padding-top: 0%; padding-left: 20%; vertical-align: middle">
            选择标签类型和大小，可以实时查看效果
          </div>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="标签类型">
              <el-tag type="primary" @click="choiceTagType('primary')" class="cursor-pointer">标签一</el-tag>
              <el-tag type="success" @click="choiceTagType('success')" class="ml10 cursor-pointer">标签二</el-tag>
              <el-tag type="info" @click="choiceTagType('info')" class="ml10 cursor-pointer">标签三</el-tag>
              <el-tag type="warning" @click="choiceTagType('warning')" class="ml10 cursor-pointer">标签四</el-tag>
              <el-tag type="danger" @click="choiceTagType('danger')" class="ml10 cursor-pointer">标签五</el-tag>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="标签大小">
              <el-tag size="large" @click="choiceTagSize('large')" class="cursor-pointer">大型标签</el-tag>
              <!-- <el-tag @click="choiceTagSize('')" class="ml10 cursor-pointer">默认大小</el-tag> -->
              <el-tag size="default" @click="choiceTagSize('default')" class="ml10 cursor-pointer">中等标签</el-tag>
              <el-tag size="small" @click="choiceTagSize('small')" class="ml10 cursor-pointer">小型标签</el-tag>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="标签效果">
              <el-tag :size="state.ruleForm.tagSize" :type="state.ruleForm.tagType">{{ state.ruleForm.name }}</el-tag>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="排序">
              <el-input-number v-model="state.ruleForm.sortCode" placeholder="排序码：数字" class="w100" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="字典描述">
              <el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="EditDictData">
import { reactive, ref } from "vue";
import { DictData, DictType } from "@/api-services/models/system";
import dictDataApi from "@/api-services/apis/system/dictDataApi";
import { feature } from "@/utils/axios-utils";
import { NotificationError, NotificationSuccess } from "@/utils/notification";
// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

// 定义变量内容
const dicDialogFormRef = ref();
const state = reactive({
  ruleForm: {} as DictData.SysDictData,
  dictType: [] as DictType.SysDictType,
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: ""
  }
});

// 打开弹窗
const openDialog = (type: string, row: DictData.SysDictData, dictType: DictType.SysDictType) => {
  state.ruleForm = JSON.parse(JSON.stringify(row));
  state.dictType = dictType;
  state.dialog.type = type;
  if (type === "edit") {
    state.dialog.title = "修改字典";
    state.dialog.submitTxt = "修 改";
  } else {
    state.dialog.title = "新增字典";
    state.dialog.submitTxt = "新 增";
    state.ruleForm.dictTypeId = dictType.id;
  }
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async () => {
  let err: Error | null;
  if (!state.ruleForm.tagType) {
    state.ruleForm.tagType = "primary";
  }
  if (!state.ruleForm.tagSize) {
    state.ruleForm.tagSize = "default";
  }
  if (state.dialog.type === "add") {
    [err] = await feature(dictDataApi.add(state.ruleForm));
  } else {
    [err] = await feature(dictDataApi.update(state.ruleForm));
  }
  if (err) {
    NotificationError(err.message);
  } else {
    NotificationSuccess(state.dialog.title + "成功");
    closeDialog();
    emit("refresh");
  }
  closeDialog();
  emit("refresh");
  // if (state.dialog.type === 'add') { }
};

const choiceTagType = (type: string) => {
  state.ruleForm.tagType = type;
};
const choiceTagSize = (size: string) => {
  state.ruleForm.tagSize = size;
};
// 暴露变量
defineExpose({
  openDialog
});
</script>
<style scoped lang="scss">
span {
  .el-tag {
    padding: 5px;
  }
}
</style>
